import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid, Brush, AreaChart, Area, Label} from 'recharts';
import data from '../out/perf-data'

export default class App extends Component {
  static propTypes = {
    params: PropTypes.object,
    location: PropTypes.object,
  };

  render() {
    return (
      <LineChart width={1200} height={400} data={data} margin={{top: 40, right: 40, bottom: 20, left: 20}} style={{fontSize: '11px'}}>
        <CartesianGrid vertical={false}/>
        <XAxis axisLine={false} tickLine={false} dataKey="batch" unit='tx/s'/>
        <YAxis axisLine={false} tickLine={false} type='number' stroke="#56b4e9" yAxisId={'speed'} unit='ms'>
          <Label angle={270} stroke="#56b4e9" position='left' style={{textAnchor: 'middle'}}>
            Average of Query Speed
          </Label>
        </YAxis>
        <YAxis axisLine={false} tickLine={false} type='number' stroke="#ae9b73" yAxisId={'tps'} unit='tps' orientation='right'>
          <Label angle={90} stroke="#ae9b73" position='right' style={{textAnchor: 'middle'}}>
            Transaction Per Seconds
          </Label>
        </YAxis>
        <Tooltip
          labelFormatter={(value) => 'Send requests at' + value + ' tranasactions per second'}
          labelStyle={{fontSize: '11px', color: '#666666'}}
          contentStyle={{fontSize: '11px', backgroundColor: 'rgba(255, 255, 255, 0.8)'}}
          wrapperStyle={{
            borderColor: 'white',
            boxShadow: '2px 2px 3px 0px rgb(204, 204, 204)',
          }}
        />
        <Line stroke="#56b4e9" dot={false} type="monotone" unit='ms' yAxisId={'speed'} dataKey="speed"/>
        <Line stroke="#ae9b73" dot={false} type="monotone" unit='tps' yAxisId={'tps'} dataKey="avgTps"/>
        <Brush dataKey="time" startIndex={0}>
          <AreaChart>
            <CartesianGrid/>
            <YAxis hide yAxisId={'speed'}/>
            <YAxis hide yAxisId={'tps'}/>
            <Area stroke="#56b4e9" fill="#56b4e9" dot={false} yAxisId='speed' dataKey="speed"/>
            <Area stroke="#009e73" fill="#ae9b73" dot={false} yAxisId='tps' dataKey="avgTps"/>
          </AreaChart>
        </Brush>
      </LineChart>
    );
  }
}
